<template>
<!-- 后台首页  订单 销售额 组件 -->
  <div class="box1">
       <i class="iconfont" :class="data.icon" :style="{color:data.iconColor}"></i>
        <div class="sj">
          <div class="text">
              {{data.title}}
          </div>
          <span class="num1">
              {{data.num | numToString}}
          </span>
        </div>
      </div>
</template>

<script>
export default {
  data() {
    return {
      // iconStyle:{color:"#f60"}
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    // console.log(this.data);
  },
  filters: {
    numToString(num) {
    //   console.log(num);
      let str = String(num);
      let strArr = str.split("").reverse();
      let arr = [];
      strArr.forEach((item, index) => {
        if (index % 3 === 0 && index > 0) {
          arr.push(",");
          arr.push(item);
        } else {
          arr.push(item);
        }
      });
      return arr.reverse().join("");
    },
  },
};
</script>

<style lang="less" scoped>
.box1 {
  display: flex;
  width: 20%;
  height: 80px;
  background: rgb(255, 255, 255);
  .sj {
    flex: 1;
    padding-top: 18px;
    line-height: 23px;
    padding-left: 10px;
    font-size: 20px;
    text-align: center;
  }
}
.text {
    margin-bottom: 8px;
  color: #cdcdcd;
}
.iconfont {
  flex: 1;
  width: 20px;
  line-height: 80px;
  text-align: center;
  font-size: 55px;
  color: #1296db;
}
</style>